<template>
  <PageWrapper>
    <BasicTable @register="registerTable">
      <template #form-channelCode="{ model, field }">
        <a-tree-select
          v-model:value="model[field]"
          :tree-data="channelTreeData"
          multiple
          allowClear
          :field-names="{
            label: 'channelName',
            value: 'channelCode',
            children: 'children'
          }"
          treeNodeFilterProp="channelName"
          placeholder="请选择渠道名称"
          :maxTagCount="1"
          showCheckedStrategy="SHOW_ALL"
        ></a-tree-select>
      </template>
      <template #form-chatCount="{ model, field }">
        <div class="flex-package">
          <a-select v-model:value="queryData.chatCountCompare" placeholder="请选择" style="max-width: 100px">
            <a-select-option :value="item.value" v-for="item in symbolArr" :key="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          <a-form-item-rest>
            <a-input-number
              class="package-number"
              :precision="0"
              :controls="false"
              placeholder="请输入"
              v-model:value="queryData.chatCount"
              :min="0"
              :max="99999999"
            />
          </a-form-item-rest>
        </div>
      </template>
      <template #form-inviteCount="{ model, field }">
        <div class="flex-package">
          <a-select v-model:value="queryData.inviteCountCompare" placeholder="请选择" style="max-width: 100px">
            <a-select-option :value="item.value" v-for="item in symbolArr" :key="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          <a-form-item-rest>
            <a-input-number
              class="package-number"
              :precision="0"
              :controls="false"
              placeholder="请输入"
              v-model:value="queryData.inviteCount"
              :min="0"
              :max="99999999"
            />
          </a-form-item-rest>
        </div>
      </template>
      <template #form-likeCount="{ model, field }">
        <div class="flex-package">
          <a-select v-model:value="queryData.likeCountCompare" placeholder="请选择" style="max-width: 100px">
            <a-select-option :value="item.value" v-for="item in symbolArr" :key="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          <a-form-item-rest>
            <a-input-number
              class="package-number"
              :precision="0"
              :controls="false"
              placeholder="请输入"
              v-model:value="queryData.likeCount"
              :min="0"
              :max="99999999"
            />
          </a-form-item-rest>
        </div>
      </template>
      <template #form-badCount="{ model, field }">
        <div class="flex-package">
          <a-select v-model:value="queryData.badCountCompare" placeholder="请选择" style="max-width: 100px">
            <a-select-option :value="item.value" v-for="item in symbolArr" :key="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          <a-form-item-rest>
            <a-input-number
              class="package-number"
              :precision="0"
              :controls="false"
              placeholder="请输入"
              v-model:value="queryData.badCount"
              :min="0"
              :max="99999999"
            />
          </a-form-item-rest>
        </div>
      </template>
      <template #tableTitle> </template>
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'chargeType'">
          <span v-if="record.chargeType == 'CYCLE'">周期计费</span>
          <span v-else-if="record.chargeType == 'SCORE'">次数计费</span>
          <span v-else>--</span>
        </template>
        <template v-else-if="column.dataIndex === 'balanceScore'">
          <span v-if="record.chargeType == 'SCORE'">{{ record.balanceScore }}</span>
          <span v-else>--</span>
        </template>
        <template v-else-if="column.dataIndex === 'payFlag'">
          <span v-if="record.payFlag == '0'">免费</span>
          <span v-else-if="record.payFlag == '1'">付费</span>
          <span v-else>--</span>
        </template>
        <template v-else-if="column.dataIndex === 'chatCount'">
          <span
            :class="record.chatCount ? 'global-primary-text' : 'global-disabled-text'"
            @click="viewNum(record, 'chatCount')"
          >
            {{ record.chatCount || 0 }}
          </span>
        </template>
        <template v-else-if="column.dataIndex === 'inviteCount'">
          <span
            :class="record.inviteCount ? 'global-primary-text' : 'global-disabled-text'"
            @click="viewInvite(record)"
          >
            {{ record.inviteCount || 0 }}
          </span>
        </template>
        <template v-else-if="column.dataIndex === 'likeCount'">
          <span
            :class="record.likeCount ? 'global-primary-text' : 'global-disabled-text'"
            @click="viewNum(record, 'likeCount')"
          >
            {{ record.likeCount || 0 }}
          </span>
        </template>
        <template v-else-if="column.dataIndex === 'badCount'">
          <span
            :class="record.badCount ? 'global-primary-text' : 'global-disabled-text'"
            @click="viewNum(record, 'badCount')"
          >
            {{ record.badCount || 0 }}
          </span>
        </template>
      </template>
    </BasicTable>
    <InviteUser @register="inviteUserRegister" />
    <ViewUserDetail @viewData="viewData" @register="viewDetailRegister" />
    <ViewDetail @register="viewRegister" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref, watch, nextTick, onMounted } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { BasicTable, useTable } from '@/components/Table'
import { getSearchFormConfig, getCompanyBasicColums } from './dataSource'
import { operateActionType, operateTxtType, constantMap } from '@/types/enum'
import { message } from 'ant-design-vue'
import { createChannelTree, transformToTree } from '@/utils'
import { formatToDateTime } from '@/utils/dateUtil'
import InviteUser from './components/InviteUser.vue'
import ViewUserDetail from './components/ViewUserDetail.vue'
import ViewDetail from '@/views/bpai/analysis/chat/components/ViewDetail.vue'

import { symbolArr, symbolDefault } from '@/utils/constantMap'
import api from '@/api'
import { useDrawer } from '@/components/Drawer'
import { any } from 'vue-types'

const { useDetail, queryChannelList } = api

const channelTreeData = ref<any>([])
const queryData: any = reactive({
  chatCount: null,
  chatCountCompare: symbolDefault,
  inviteCount: null,
  inviteCountCompare: symbolDefault,
  likeCount: null,
  likeCountCompare: symbolDefault,
  badCount: null,
  badCountCompare: symbolDefault
})

onMounted(async () => {
  const res = await queryChannelList({ channelRange: '2' })
  channelTreeData.value = transformToTree(res.result)
})

const [inviteUserRegister, { openDrawer: inviteUserDrawer, setDrawerProps: inviteUserProps }] = useDrawer()
const [viewDetailRegister, { openDrawer: viewDetailDrawer, setDrawerProps: viewDetailProps }] = useDrawer()
const [viewRegister, { openDrawer: viewOpenDrawer, setDrawerProps }] = useDrawer()
const [registerTable, { reload, setPagination, getForm }] = useTable({
  api: useDetail,
  columns: getCompanyBasicColums(),
  useSearchForm: true,
  beforeFetch: beforeParamsFetch,
  showIndexColumn: true,
  formConfig: { ...getSearchFormConfig(), resetFunc },
  indexColumnProps: {
    fixed: 'left'
  },
  scroll: { y: constantMap.tableYHeight, x: constantMap.tableXWidth }
})
async function resetFunc() {
  queryData.chatCount = null
  queryData.inviteCount = null
  queryData.likeCount = null
  queryData.badCount = null
  queryData.chatCountCompare = symbolDefault
  queryData.inviteCountCompare = symbolDefault
  queryData.likeCountCompare = symbolDefault
  queryData.badCountCompare = symbolDefault
}
function beforeParamsFetch(params: any) {
  const { page, ...rest } = params
  const { getFieldsValue } = getForm()
  const formData = getFieldsValue()

  let paramsData = {
    ...rest,
    chatCount: queryData.chatCount || queryData.chatCount == 0 ? queryData.chatCount : undefined,
    chatCountCompare: queryData.chatCount || queryData.chatCount == 0 ? queryData.chatCountCompare : undefined,
    inviteCount: queryData.inviteCount || queryData.inviteCount == 0 ? queryData.inviteCount : undefined,
    inviteCountCompare: queryData.inviteCount || queryData.inviteCount == 0 ? queryData.inviteCountCompare : undefined,
    likeCount: queryData.likeCount || queryData.likeCount == 0 ? queryData.likeCount : undefined,
    likeCountCompare: queryData.likeCount || queryData.likeCount == 0 ? queryData.likeCountCompare : undefined,
    badCount: queryData.badCount || queryData.badCount == 0 ? queryData.badCount : undefined,
    badCountCompare: queryData.badCount || queryData.badCount == 0 ? queryData.badCountCompare : undefined,
    page: {
      pageNo: page.pageNo || 1,
      pageSize: page.pageSize || 10
    }
  }
  return paramsData
}

// 查看
const viewInvite = (record: any) => {
  if (record.inviteCount) {
    let title = '邀请用户详情'
    if (record.phoneNumber) {
      title = title + `（手机号：${record.phoneNumber}）`
    }
    inviteUserProps({
      title
    })
    inviteUserDrawer(true, {
      record
    })
  }
}
const viewNum = (record: any, type: string) => {
  if (record[type]) {
    let mapData: any = {
      chatCount: '咨询问题',
      likeCount: '点赞问题',
      badCount: '点踩问题'
    }
    let title = mapData[type] + '详情'
    if (record.phoneNumber) {
      title = title + `（手机号：${record.phoneNumber}）`
    }
    viewDetailProps({
      title
    })
    viewDetailDrawer(true, {
      record,
      type
    })
  }
}
const viewData = (record: any) => {
  let title = '咨询问题详情'
  if (record.phoneNumber) {
    title = title + `（手机号：${record.phoneNumber}）`
  }
  setDrawerProps({
    title
  })
  viewOpenDrawer(true, { record, showType: 'userDetail' })
}
</script>

<style lang="less" scoped>
:deep(.ant-table-wrapper) {
  overflow-x: hidden;
}
:deep(.ant-table-column-sorters) {
  justify-content: flex-start;
  .ant-table-column-title {
    flex: none;
  }
  .ant-table-column-sorter {
    margin-left: 8px;
  }
}
.time-num {
  color: @primary-color;
}
.flex-package {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .package-number {
    flex: 1;
    margin-left: 8px;
  }
}
</style>
